<template>
	<view
		:style="'order:'+item.order+';'+item.css"
		class="list-interaction">
		<template v-if="listStatus == 'success'">
			<view
				class="_for"
				v-for="item in list"
				@click="$_to('post/detail?pid=' + item.pid)">
				<!-- 如果存在随机广告 -->
				<template v-if="item.html">
					<mp-html :content="item.html" :selectable="true"/>
				</template>
				<template v-else>
					<view class="_author" @click.stop="$_to('user/detail?uid=' + item.author.uid)">
						<view class="_author-avatar">
							<image :src="item.author.avatar" mode="widthFix"></image>
						</view>
						<view class="_author-center">
							<view class="_author-center-top">
								<view class="_nickname">{{item.author.nickname}}</view>
								<template
									v-if="item.author.gender === 3||item.author.gender === 2">
									<view class="_gender" :style="item.author.gender === 3?'background: #ffa4a1;':''">
										<text
											class="iconfont icon-nv"
											v-if="item.author.gender === 3"></text>
										<text
											class="iconfont icon-nan"
											v-if="item.author.gender === 2"></text>
									</view>
								</template>
								<view
									class="_role-name"
									:style="'background:'+item.author.nicknameColor+';'">
									<text :style="item.author.nicknameColor?'color: #FFF;':''">{{item.author.roleName}}</text>
								</view>
							</view>
							<view class="_author-center-bottom">
								<view>
									<text>{{item.createdTimeAgo}}</text>
								</view>
								<view v-if="item.geotag">
									<text class="iconfont icon-dingwei1"></text>
									<text>{{item.geotag.name}}</text>
								</view>
							</view>
						</view>
						<view class="_author-right">
							<view>
								<text class="iconfont icon-add-bold" v-if="!item.author.interaction.followStatus"></text>
								<text>
									{{item.author.interaction.followStatus?'已关注':'关注'}}
								</text>
							</view>
						</view>
					</view>
					<view class="_post-title" v-if="item.title">{{item.title}}</view>
					<view class="_post-content" :style="item.title?'':'color:#303133;font-size: 32rpx;line-height: 45rpx;margin-top: 20rpx;'">{{$_filterHtml(item.content)}}</view>
					<public-list-files :item="item.files"></public-list-files>
					<view class="_post-group-hashtag">
						<view class="_post-group-hashtag-for" v-if="item.group || item.hashtags.length">
							<view class="-img" v-if="item.group.cover">
								<image :src="item.group.cover" mode="widthFix"></image>
							</view>
							<view class="-name">{{item.group.name}}</view>
						</view>
						<view class="_post-group-hashtag-for" v-if="item.hashtags.length">
							<text class="iconfont icon-huatifuhao"></text>
							<view class="-name">
								{{item.hashtags[0].name}}
							</view>
						</view>
					</view>
					<view class="_like" v-if="item.previewLikeUsers.length">
						<view class="_like-left">
							<view
								class="_like-left-avatar"
								:style="'z-index:'+index+';'"
								v-for="(like,index) in item.previewLikeUsers">
								<image :src="like.avatar" mode="widthFix"></image>
							</view>
							<view class="_like-left-text">
								<text>{{item.likeCount}}赞</text>
							</view>
						</view>
						<view class="_like-right">
							<view>
								<text class="iconfont icon-good"></text>
							</view>
						</view>
					</view>
					<view class="_post-comment" v-if="item.previewComments.length">
						<view class="_post-comment-for" v-for="comment in item.previewComments">
							<text class="_post-comment-for-author">{{comment.author.nickname}}:</text>
							<text class="_post-comment-for-content">{{$_filterHtml(comment.content)}}</text>
						</view>
						<view class="_post-comment-for-page">
							共<text>{{item.commentCount}}</text>条评论 >
						</view>
					</view>
				</template>
			</view>
			<view
				class="more-content"
				v-if="item.page"
				@click="clickMoreButton">
				{{listPageText}}
			</view>
		</template>
		<template v-if="listStatus === 'loading'">
			<view class="_loading">
				<view class="skeleton-screen" v-for="itemData in item.query.pageSize?item.query.pageSize:1"></view>
			</view>
		</template>
		<template v-if="listStatus === 'empty'">
			<global-empty></global-empty>
		</template>
	</view>
</template>

<script>
	export default {
		name:"list-interaction",
		props:{
			item:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				list:[],
				listStatus:"loading",
				listPage:2,
				listPageText: this.$t('clickToLoadMore')
			};
		},
		mounted(){
			this.getList();
		},
		methods: {
			getList(){
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,author,createdTimeAgo,geotag,title,content,files,group,hashtags,previewLikeUsers,previewComments,commentCount,likeCount",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"cover,name",
						"filterHashtagType":"whitelist",
						"filterHashtagKeys":"htid,name",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"uid,avatar,nickname,gender,nicknameColor,roleName,interaction.followStatus",
						"filterPreviewLikeUserType":"whitelist",
						"filterPreviewLikeUserKeys":"avatar",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"content,author.nickname",
						"filterGeotagType":"whitelist",
						"filterGeotagKeys":"name",
						"page":1
					},
					(res) => {
						if (res.data.data.list.length) {
							if(this.item.randomInsertion.status){
								this.list = res.data.data.list;
								const randomObject = this.item.randomInsertion;
								const randomIndex = Math.floor(Math.random() * (this.list.length + 1));
								this.list.splice(randomIndex, 0, randomObject);
							}else{
								this.list = res.data.data.list;
							}
							this.listStatus = "success";
						} else {
							this.listStatus = "empty";
						}
					}
				)
			},
			clickMoreButton(){
				if (this.listPageText == this.$t('loading')) { return }
				this.listPageText = this.$t('loading');
				this.$_request(
					"GET", "/api/fresns/v1/post/list",
					{
						...this.item.query,
						"filterType":"whitelist",
						"filterKeys":"pid,author,createdTimeAgo,geotag,title,content,files,group,hashtags,previewLikeUsers,previewComments,commentCount,likeCount",
						"filterGroupType":"whitelist",
						"filterGroupKeys":"cover,name",
						"filterHashtagType":"whitelist",
						"filterHashtagKeys":"htid,name",
						"filterAuthorType":"whitelist",
						"filterAuthorKeys":"uid,avatar,nickname,gender,nicknameColor,roleName,interaction.followStatus",
						"filterPreviewLikeUserType":"whitelist",
						"filterPreviewLikeUserKeys":"avatar",
						"filterPreviewCommentType":"whitelist",
						"filterPreviewCommentKeys":"content,author.nickname",
						"filterGeotagType":"whitelist",
						"filterGeotagKeys":"name",
						"page": this.listPage
					},
					(res) => {
						if (res.data.data.list.length) {
							this.list = this.list.concat(res.data.data.list);
							this.listPage++
							this.listPageText = this.$t('clickToLoadMore')
						} else {
							this.listPageText = this.$t('listEmpty')
						}
					}
				)
			}
		},
	}
</script>

<style lang="scss" scoped>
.list-interaction{
	.more-content{
		padding: 25rpx 0;
		font-size: 22rpx;
		line-height: 22rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: $placeholder;
	}
	._loading{
		background: #FFF;
		padding: 25rpx 25rpx 1rpx 25rpx;
		.skeleton-screen{
			width: 100%;
			height: 50rpx;
			margin-bottom: 25rpx;
		}
	}
	._for{
		padding: 25rpx;
		margin-top: 25rpx;
		background: #FFF;
		._author{
			display: flex;
			align-items: center;
			._author-avatar{
				width: 90rpx;
				height: 90rpx;
				overflow: hidden;
				flex-shrink: 0;
				border-radius: 100rpx;
			}
			._author-center{
				flex: 1;
				margin: 0 20rpx;
				._author-center-top{
					display: flex;
					align-items: center;
					._nickname{
						font-size: 32rpx;
						line-height: 32rpx;
					}
					._gender{
						width: 32rpx;
						height: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 5rpx;
						background: $theme;
						line-height: 28rpx;
						margin-left: 15rpx;
						text{
							font-size: 28rpx;
							color: #FFF;
						}
					}
					._role-name{
						height: 32rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-radius: 5rpx;
						background: $background;
						line-height: 22rpx;
						margin-left: 15rpx;
						padding: 0 10rpx;
						text{
							font-size: 22rpx;
							color: $placeholder;
						}
					}
				}
				._author-center-bottom{
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
					view{
						line-height: 22rpx;
						display: flex;
						align-items: center;
						flex-shrink: 0;
						margin-right: 10rpx;
						text{
							flex-shrink: 0;
							font-size: 22rpx;
							color: $placeholder;
						}
					}
				}
			}
			._author-right{
				flex-shrink: 0;
				display: flex;
				align-items: center;
				view{
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 22rpx;
					background: $background;
					padding: 10rpx 15rpx;
					border-radius: 100rpx;
					border: 1px solid $border;
					text{
						font-size: 22rpx;
						color: $theme;
					}
				}
			}
		}
		._post-title{
			font-weight: bold;
			margin-top: 25rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden;
			font-size: 32rpx;
			line-height: 32rpx;
		}
		._post-content{
			word-break: break-all;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-top: 15rpx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 3;
			overflow: hidden;
		}
		._post-group-hashtag{
			display: flex;
			align-items: center;
			._post-group-hashtag-for{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50rpx;
				padding: 0 5rpx;
				background: #e7f3ff;
				margin-top: 15rpx;
				margin-right: 25rpx;
				border-radius: 100rpx;
				.-img{
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					border-radius: 100rpx;
				}
				.iconfont{
					width: 40rpx;
					height: 40rpx;
					overflow: hidden;
					border-radius: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: $theme;
					color: #FFF;
					font-size: 25rpx;
				}
				.-name{
					display: flex;
					align-items: center;
					font-size: 22rpx;
					line-height: 22rpx;
					color: $theme;
					padding: 0 10rpx;
				}
			}
		}
		._like{
			display: flex;
			align-items: center;
			margin-top: 20rpx;
			._like-left{
				flex: 1;
				display: flex;
				align-items: center;
				overflow: hidden;
				._like-left-avatar{
					width: 50rpx;
					height: 50rpx;
					overflow: hidden;
					border: 1px solid #FFF;
					border-radius: 100rpx;
					flex-shrink: 0;
					margin-left: -15rpx;
					position: relative;
				}
				._like-left-avatar:nth-child(1){
					margin-left: 0;
					position: relative;
				}
				._like-left-text{
					display: flex;
					align-items: center;
					height: 50rpx;
					line-height: 28rpx;
					padding-left: 15rpx;
					flex-shrink: 0;
					text{
						font-size: 28rpx;
						color: $placeholder;
					}
				}
			}
			._like-right{
				flex-shrink: 0;
				height: 50rpx;
				view{
					height: 50rpx;
					width: 50rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: $placeholder;
					border-radius: 100rpx;
					text{
						font-size: 30rpx;
						color: #FFF;
					}
				}
			}
		}
		._post-comment{
			border-top: 1px solid $border;
			margin-top: 20rpx;
			padding-top: 15rpx;
			._post-comment-for{
				padding: 5rpx 0 0 0;
				._post-comment-for-author{
					color: $theme;
					padding-right: 5rpx;
					font-size: 28rpx;
				}
				._post-comment-for-content{
					font-size: 28rpx;
				}
			}
			._post-comment-for-page{
				color: $placeholder;
				line-height: 28rpx;
				font-size: 28rpx;
				margin-top: 15rpx;
				text{
					color: $theme;
					padding: 0 5rpx;
					font-size: 28rpx;
				}
			}
		}
	}
	._for:nth-child(1){
		margin-top: 0;
	}
}
</style>